<template>
	<view class="step1">
		<view class="scroll">
			<u-read-more ref="uReadMore" :toggle="true" closeText="展开" showHeight="120" color="#1BC46D">
				<rich-text :nodes="strings"></rich-text>
			</u-read-more>
		</view>
		<view class="bottom">
			<view class="title">
				乙方签字
			</view>
			<view class="content" @click="show = true" v-if="!show && imgUrl == ''">
				<view class="qian">
					在此区域内签字
				</view>
			</view>
			<view class="content" @click="show = true" v-if="!show && imgUrl != ''">
				<image :src="imgUrl" mode="" style="width: 100%;height: 390rpx;"></image>
			</view>
			<jushi-signature base64 v-if="show" :settings="settings" @change="signatureChange"></jushi-signature>
			<view class="btn df">
				<view class="up" @click="stepUp(1)">
					上一步
				</view>
				<view class="down" @click="stepUp(3)">
					下一步
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import {findContract,findUserContract} from "@/api/api.js"
import loginVue from "../../login/login.vue"
	export default {
		data() {
			return {
				show: false,
				settings: { //签名设置
					width: '690', //签名区域的宽
					height: '430', //签名区域的高
					lineWidth: 3, //签名时线宽
					textColor: '#007AFF' //签名文字颜色
				},
				imgUrl: '',
				ImageURL:'',
				strings: ''
			}
		},
		mounted(){
			this.getContractInfo()
		},
		onShow() {
		},
		methods: {
			async getContractInfo(){
				uni.showLoading({
					mask:true
				})
				const res = await findContract('')
				try{
					if(res?.data.code == 200){
						console.log(res);
						this.strings = res.data.data.contractContents
						console.log(this.strings);
						uni.hideLoading()
						this.$refs.uReadMore.init();
					}else{
						uni.$u.toast(res.data.msg)
					}
				}catch(e){
					//TODO handle the exception
					uni.$u.toast(e)
					throw e
				}
			},
			signatureChange(e) {
				console.log(e)
				if (e != '') {
					uni.showLoading({
						mask:true,
					})
					this.imgUrl = e
					this.show = false
					this.base64ToUrl({imgUrlBase64:e})
				} else {
					uni.hideLoading()
					this.show = false
					this.imgUrl = ''
				}
			},
			async base64ToUrl(base64){
				let that = this
				let request = function(){
					uni.request({
						url:"https://bbgy.cpzsyun.com:82/ryapi/gardenFoster/file/uploadBase64Server",
						data:base64,
						method:"POST",
						header:{
							'Content-Type':'application/x-www-form-urlencoded'
						},
						success: (res) => {
							console.log(res);
							if(res?.data.code == 200){
								let imgURL = res.data.msg
								that.ImageURL = imgURL
								uni.hideLoading()
							}else{
								uni.$u.toast('上传签名失败')
							}
						}
					})
				}
				request()
			},
			stepUp(i) {
				if(i == 3 && !this.ImageURL){
					uni.showToast({
						title:"请签署您的名字",
						icon:'error'
					})
					return
				}
				this.$emit('step', {index:i,imageURL:this.ImageURL})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.step1 {

		.df {
			display: flex;
		}

		.scroll {
			width: 670rpx;
			// height: 152rpx;
			padding: 34rpx 40rpx 30rpx;
			background-color: #fff;
			box-shadow: 0rpx 0rpx 10rpx 0rpx rgba(0, 0, 0, 0.12);
			border-radius: 0rpx 0rpx 36rpx 36rpx;
			margin-bottom: 30rpx;

			.title {
				font-size: 32rpx;
				color: #282828;
				margin-bottom: 36rpx;
				font-weight: bold;
			}

			.com {
				display: flex;
				margin-top: 28rpx;
				font-size: 32rpx;

				.tt {
					color: rgba(68, 78, 104, 0.7);
				}

				.text {
					color: #1D1D1D;
				}

				.money {
					color: #FA680A;
				}
			}
		}

		.bottom {
			padding: 30rpx 30rpx;
			padding-top: 0;

			.title {
				font-size: 32rpx;
				color: #282828;
				font-weight: bold;
				margin-bottom: 22rpx;
			}

			.content {
				width: 650rpx;
				height: 390rpx;
				background: #FFFFFF;
				box-shadow: 0rpx 0rpx 14rpx 0rpx rgba(0, 0, 0, 0.04);
				border-radius: 10rpx;
				padding: 20rpx;

				.qian {
					width: 650rpx;
					height: 390rpx;
					background: #FFFFFF;
					border-radius: 10rpx;
					border: 2rpx dashed rgba(0, 122, 255, 0.4);
					line-height: 390rpx;
					text-align: center;
					color: rgba(0, 122, 255, 0.4);
					font-size: 32rpx;
				}
			}

			.btn {
				justify-content: space-between;
				margin-top: 60rpx;

				.up {
					width: 280rpx;
					height: 88rpx;
					background: rgba(27, 196, 109, 0.1);
					border-radius: 12rpx;
					border: 2rpx solid #1BC46D;
					line-height: 88rpx;
					text-align: center;
					color: #17CC77;
					font-weight: bold;
				}

				.down {
					width: 280rpx;
					height: 88rpx;
					background: #1BC46D;
					box-shadow: 0rpx 0rpx 10rpx 0rpx rgba(27, 196, 109, 0.4);
					border-radius: 12rpx;
					line-height: 88rpx;
					text-align: center;
					color: #FFFFFF;
				}
			}
		}

	}
</style>